13. 文章列表List组件

文章列表组件和Topic大同小异，就是在样式布局和reducer中的数据一样
src/page/home/components/List

import React, { Component } from 'react'
import { ListItem, ListInfo } from '../style'
import { connect } from 'react-redux';

class List extends Component {
	render(){
		const { list } = this.props
		return (
			<div>
				{
					list.map((item) => {
						return (
							<ListItem key={ item.get('id') }>  
								<img className='pic' src={ item.get('imgUrl') } alt=''/>
								<ListInfo>
									<h3 className='title'>{ item.get('title') }</h3>
									<p className='desc'>{ item.get('desc') }</p>
								</ListInfo>
							</ListItem>
						)
					})
				}
			</div>
		)
	}
}

const mapState = (state) => ({
	list: state.getIn(['home', 'articleList'])
	// get是获取单个，而getIn是获取多个
})

export default connect(mapState, null)(List);

代码地址